<template>
    <div class="component-login">
        <modal class='component-login__modal'
            :maskClose='maskClose' 
            :show='show' 
            @close='emitClose'>
            <div class='component-login__header'>
                <!-- <p class='component-login__welcome'>欢迎使用“有借”</p> -->
                <p class='component-login__bind-text'>请先登录</p>
            </div>
            <div class="component-login__form">
                <div class="form__item">
                    <div class="form__value">
                        <input v-model='tel' type="tel" placeholder="请输入手机号码" maxlength="11">
                    </div>
                </div>
                <div class="form__item" v-show='telPass'>
                    <div class="form__value">
                        <input v-model='smsCode' type="number" pattern="[0-9]*" placeholder="请输入验证码">
                        <verification-code text='发送验证码' class='component-sms-code__code' v-model='sent' @click='getAuth' ></verification-code>
                    </div>
                </div>
                <!-- <div  v-show='telPass'></div> --> <!-- 验证码容器元素 -->
            </div>
            <div class="component-login__button" @click='login'><span class="button">登录</span></div>
            <p class='component-login__register' @click='goLogin'>登录即表示同意<span>《用户使用协议》</span></p>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import checkBox from '../components/CheckBox.vue'
    import verificationCode from '../components/VerificationCode.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { getScript, rules } from '../utils/utils'
    import { loginValidation } from '../validation/validation'
    import { allApi, loginApi, contactApi, loanInApi, loanOutApi, userApi, payApi } from '../api/api'

    export default {
        name:'User',
        components:{
            modal,
            verificationCode,
            checkBox
        },
        filters:{
        },
        props: {
            show: {
                type: Boolean,
                required: true,
                default:false
            },
            maskClose:{
                type: Boolean,
                default:false
            },
            action: {
                type: String,
                default:''
            },
        },
        data() {
            return {
                tel:'',
                smsCode:'',
                sent:false,
                inst:{},
                info:{},
                show_captcha:true,
                validate:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            registerAgreementUrl(){
                if(this.localInfo.configInfo){
                    return this.localInfo.configInfo.registerAgreementUrl
                }
            },
            captchaId(){
                if(this.localInfo.configInfo && this.localInfo.configInfo.checkCaptchaParam){
                    return this.localInfo.configInfo.checkCaptchaParam.captchaId
                }
            },
            telPass(){
                return rules.tel(this.tel)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setUserInfo',
                'setNeedLogin',
            ]),

            // function

            login(){

                allApi.log({
                    e_n:'c_login',
                    e_v:{
                        value:this.tel
                    }
                })

                let params = {
                    userPhone:this.tel,
                    phoneCode:this.smsCode,
                }
                if(!loginValidation(params)) return

                this.showLoading()
                loginApi.login(params)
                .then(result=>{
                    this.setSessionId(result.sessionId)
                    this.setUserInfo(result)
                    this.setNeedLogin(false)
                })
                .then(result=>{
                    this.hideLoading()
                    this.emitClose()
                    this.emitFinish()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getAuth(){
                if(!this.tel){
                    this.setMsgTip({
                        text:'请先输入手机号码',
                        type:'warn'
                    })
                    return
                }

                if(this.tel && !rules.tel(this.tel)){
                    this.setMsgTip({
                        text:'请输入正确的手机号码',
                        type:'warn'
                    })
                    return
                }
                this.getCode()
            },
            getCode(validate){

                if(this.sent) return
                this.sent = true;

                userApi.sendSms(_.merge({
                    platform:'H5',
                    validate:this.validate,
                    userPhone:this.tel
                },this.info))
                .then(result=>{

                })
                .catch(error => {
                    console.error(error)
                    this.setCaptcha()
                    this.sent = false
                })
            },
            goLogin(){
                location.href = this.registerAgreementUrl
            },
            emitClose(){
                this.$emit('close')
            },
            emitFinish(){
                this.$emit('finish')
            },
            goForgetPassword(){
                this.$router.push({
                    name:'user-password-find-login',
                    query:{
                        mobile:this.tel
                    }
                })
            },
            // initCaptcha(){
            //     let self = this
            //     initNECaptcha({
            //       captchaId: self.captchaId,
            //       element: '#captcha',
            //       onReady: function (instance) {
            //         $('.yidun_intelli-text').text('点击发送验证码')
            //         // 验证码一切准备就绪，此时可正常使用验证码的相关功能
            //       },
            //       onVerify: function (err, data) {
            //         setTimeout(()=>{
            //             $('.yidun_tips__text').text('发送验证码成功')
            //         },500)
            //         self.show_captcha = false
                    
            //             self.getAuth()
            //       }
            //     }, function onload (instance,destroy) {
            //         // self.inst = instance
            //         //console.log(instance.destroy())

            //     }, function onerror (err) {
            //         self.setMsgTip({
            //             text:'初始化失败，请重新点击获取验证码',
            //             type:'warn'
            //         })
            //       // 验证码初始化失败处理逻辑，例如：提示用户点击按钮重新初始化
            //     })
            // },
            setCaptcha(){
                this.show_captcha = true
                //this.initCaptcha()
                // getScript('//cstaticdun.126.net/load.min.js',()=>{
                //     this.initCaptcha()
                // })
            }
        },
        created(){
        },
        mounted(){
            this.$nextTick(()=>{
                this.setCaptcha()
            })
        },
        watch: {
            'show'(newVal,oldVal){
                if(newVal == true) {
                    this.setCaptcha()
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-login__modal{
        .component-login__header{
            padding-left: 0;
        }
        .component-login__welcome{
            @extend %font-caption;
        }
        .component-login__bind-text{
            @extend %font-title;
            color:$importColor;
        }
        .component-login__form{
            .form__item{  
                margin-top: 24px;
                &:last-child{
                    margin-top:32px;
                    border-bottom: 0;
                    &:after{
                        display: block;
                    }
                }
                &:after{
                    left:0;
                    right:0;
                }
            }
            .form__value{
                position: relative;
                input{
                    @extend %font-subhead;
                    padding:7px 0;
                    text-align: left;
                }
            }
            .login__forget{
                padding-right: 0;
                text-align: right;
            }
        }
        .component-login__button{
            margin-top: 38px;
        }
        .component-login__register{
            @extend %font-caption;
            padding-top: 14px;
            text-align: center;
            span{
                color:$blue;
            }
        }
        #captcha{
            // opacity:0;
            // position: absolute;
            // height:48px;
            // width: 120px;
            // right:0;
            // bottom:0;
        }
    }

</style>
